<template>
	<div class="header">
		<el-row>
			<!-- logo+登录+搜索 start -->
			<el-col :span="14" class="login">
				<router-link to="/" v-if="!avatar"><i>&#xe984;</i></router-link>
				<img v-else src="../assets/img/kugou.png" />
				<div class="login-content">
					<a href="javascript:;" @click="handleLogin" v-if="!account"
						>登录</a
					>
					<a href="javascript:;" v-else>{{ account }}</a>
					<!-- 登录模态框 start -->
					<div class="login-box" v-show="loginIsShow">
						<div class="model-box">
							<div class="box-hd">
								<p>登录账号</p>
								<a href="javascript:;" @click="handleLogin"
									><i title="关闭">&#xe60a;</i></a
								>
							</div>
							<div class="box-bd">
								<!-- 登录与注册的切换 start -->
								<div class="tab">
									<ul>
										<li
											v-for="item of loginItem"
											:key="item.id"
											:class="{
												is_active: item.is_active,
											}"
											@click="toggleLogin(item.id)"
										>
											<a href="javascript:;">{{
												item.name
											}}</a>
										</li>
									</ul>
								</div>
								<!-- 登录与注册的切换 end -->

								<!-- 表单内容 start -->
								<div class="content">
									<div
										class="form register-form"
										v-if="formIsShow"
									>
										<input
											type="text"
											placeholder="请输入6~16位的用户名"
											v-model="username"
										/>
										<input
											type="password"
											placeholder="请输入6~12位的密码"
											v-model="password"
										/>
										<input
											type="password"
											placeholder="请再次输入密码"
											v-model="cpassword"
										/>

										<button @click="registerUserInfo">
											注册
										</button>
									</div>
									<div class="form login-form" v-else>
										<input
											type="text"
											placeholder="用户名/手机号/邮箱"
											v-model="uname"
										/>
										<input
											type="password"
											placeholder="请输入密码"
											v-model="upwd"
										/>
										<div class="login-help">
											<div class="auto-login">
												<input
													type="checkbox"
													id="auto"
													v-model="autoLogin"
												/>
												<label for="auto"
													>自动登录</label
												>
											</div>
											<div class="get-back-account">
												<a href="javascript:;"
													>找回账号</a
												>
											</div>
										</div>
										<button @click="loginUserInfo">
											登录
										</button>
									</div>
								</div>
								<!-- 表单内容 end -->
							</div>
						</div>
					</div>
					<!-- 登录模态框 end -->
				</div>

				<!-- 刷新+搜索 start -->
				<div class="search">
					<!-- 后退 start -->
					<div class="back" @click="goBack">
						<i title="返回">&#xe63e;</i>
					</div>
					<!-- 后退 end -->

					<!-- 刷新 start -->
					<div class="freshen" @click="freshen">
						<i title="刷新">&#xe644;</i>
					</div>
					<!-- 刷新 end -->

					<!-- 搜索 start -->
					<div class="input">
						<input
							type="text"
							v-model="search"
							@focus="focus"
							@blur="blur"
							@input="input"
							@keydown.13="searchMusic"
						/>
						<i
							id="search"
							title="搜索"
							@click="targetSearchDetails()"
							>&#xe662;</i
						>
						<i
							id="close"
							v-show="isShow"
							title="清空"
							@click="close"
							>&#xe65d;</i
						>
					</div>
					<!-- 搜索 end -->

					<!-- 听歌识曲 start -->
					<div class="listen">
						<i title="听歌识曲">&#xe626;</i>
					</div>
					<!-- 听歌识曲 end -->
				</div>
				<!-- 刷新+搜索 end -->
			</el-col>
			<!-- logo+登录 end -->

			<!-- 其余的一大堆功能图标 start -->
			<el-col :span="10" class="other-icon">
				<!-- 动态壁纸 start -->
				<div class="wallpaper">
					<i title="动态壁纸">&#xe609;</i>
				</div>
				<!-- 动态壁纸 end -->

				<!-- 皮肤 start -->
				<div class="skin">
					<i title="个性皮肤">&#xe716;</i>
				</div>
				<!-- 皮肤 end -->

				<!-- 消息中心 start -->
				<div class="message">
					<i title="消息中心">&#xe6e9;</i>
				</div>
				<!-- 消息中心 end -->

				<!-- 主菜单 start -->
				<div class="menu">
					<i title="主菜单">&#xe848;</i>
				</div>
				<!-- 主菜单 end -->

				<!-- 垂直分割线 start -->
				<div class="vertical-line"></div>
				<!-- 垂直分割线 end -->

				<!-- 精简模式 start -->
				<div class="condense">
					<i title="精简模式">&#xe635;</i>
				</div>
				<!-- 精简模式 end -->

				<!-- 最小化 start -->
				<!-- <object
					id="min"
					classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"
				>
					<param name="Command" value="Minimize" />
				</object> -->
				<div class="mini" @click="mini">
					<i title="最小化">&#xe9d0;</i>
				</div>

				<!-- 最小化 end -->

				<!-- 最大化 start -->
				<div class="max">
					<i title="最大化">&#xe758;</i>
					<i title="还原" v-show="maxIsShow">&#xe60d;</i>
				</div>
				<!-- 最大化 end -->

				<!-- 关闭 start -->

				<div class="close" @click="closeWindow">
					<i title="关闭">&#xe60a;</i>
				</div>
				<!-- 关闭 end -->
			</el-col>
			<!-- 其余的一大堆功能图标 end -->
		</el-row>
		<!-- 选项卡 start -->
		<div class="tab-bar">
			<ul class="nav-list">
				<!-- 每一个导航项 start -->
				<li
					v-for="item of navList"
					:key="item.id"
					:style="item.style"
					:class="{ 'is-active': item.isActive }"
					@click="toggleNav(item.id)"
				>
					<!-- 内容 start -->
					<router-link
						:to="item.path"
						:class="{
							'black-color': item.blackColor,
							'blue-color': item.blueColor,
						}"
					>
						<i :class="item.iconClass"></i>
						<span :class="item.textClass">{{ item.pathName }}</span>
					</router-link>
					<!-- 内容 end -->
					<!-- 关闭按钮 start -->
					<div class="close" v-show="item.hasClose">
						<i>&#xe65d;</i>
					</div>
					<!-- 关闭按钮 end -->
				</li>
				<!-- 每一个导航项 end -->
				<!-- 添加按钮 start -->
				<li class="add"></li>
				<!-- 添加按钮 end -->
			</ul>
		</div>
		<!-- 选项卡 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 用户名
			account: sessionStorage.getItem("account"),
			// 头像
			avatar: sessionStorage.getItem("avatar"),
			// 清空按钮是否显示
			isShow: false,
			// 双向绑定输入框
			search: "李焕英",
			// 还原按钮是否显示
			maxIsShow: false,
			// 登录弹窗是否显示
			loginIsShow: false,
			// 默认选中用户登录选项卡
			activeName: "second",
			// 登录切换选项阿卡内容
			loginItem: [
				{
					id: 1,
					name: "用户注册",
					is_active: false,
				},
				{
					id: 2,
					name: "用户登录",
					is_active: true,
				},
			],
			// 登录用户名
			uname: "",
			// 登录密码
			upwd: "",
			// 登录提示
			loginShow: "",
			// 注册用户名
			username: "",
			// 注册密码
			password: "",
			// 确认密码
			cpassword: "",
			// 注册提示
			registerShow: "",
			// 判断是注册还是登录
			formIsShow: false,
			// 是否自动登录
			autoLogin: "",
			// 导航选项卡列表
			navList: [
				{
					id: 1,
					index: "3",
					path: "/myMusic",
					pathName: "我的音乐",
					blackColor: true,
					blueColor: false,
					isActive: false,
					hasClose: false,
					textClass: {
						"my-music": true,
					},
					style: {
						"--i": 0,
						"--j": 3,
					},
					iconClass: {
						iconfont: true,
						"icon-wode": true,
						"my-music": true,
					},
				},
				{
					id: 2,
					index: "2",
					path: "/recommend",
					pathName: "发现",
					blackColor: false,
					blueColor: true,
					isActive: true,
					hasClose: false,
					textClass: {
						discovery: true,
					},
					style: {
						"--i": 1,
						"--j": 2,
					},
					iconClass: {
						iconfont: true,
						"icon-douyin": true,
						discovery: true,
					},
				},
				{
					id: 3,
					index: "1",
					path: "/grope",
					pathName: "探索",
					blackColor: true,
					blueColor: false,
					isActive: false,
					hasClose: true,
					style: {
						"--i": 2,
						"--j": 1,
					},
				},
			],
		};
	},
	methods: {
		// 搜索框获取焦点事件
		focus() {
			// 如果是默认的初始值,就清除,不然不清除
			if (this.search == "李焕英") {
				// 获取焦点之后删除value值
				this.search = "";
			}
		},
		// 搜索框失去焦点事件
		blur() {
			// 如果失去焦点时是空内容,那么还初始的value值
			if (this.search == "") {
				this.search = "李焕英";
			}
		},
		// 搜索框输入事件(这里只能用input,watch监测有bug)
		input() {
			// 输入不为空清空按钮显示
			if (this.search !== "") {
				this.isShow = true;
			} else {
				// 输入为空清空按钮隐藏
				this.isShow = false;
			}
		},
		// 清空按钮,清空后还原为初始的value值,并且让搜索框失去焦点,并隐藏清空按钮
		close() {
			this.search = "李焕英";
			this.blur();
			this.isShow = false;
		},
		// 登录按钮,模态框是否显示
		handleLogin() {
			if (this.loginIsShow) {
				this.loginIsShow = false;
			} else {
				this.loginIsShow = true;
			}
		},
		// 切换登录方式
		toggleLogin(id) {
			this.loginItem.forEach((item) => {
				if (item.id == id) {
					item.is_active = true;
				} else {
					item.is_active = false;
				}
				if (id == 1) {
					this.formIsShow = true;
				} else {
					this.formIsShow = false;
				}
			});
		},
		// 页面刷新
		freshen() {
			location.reload();
		},
		// 后退页面
		goBack() {
			history.go(-1);
		},
		// 最小化
		mini() {},
		// 关闭窗口
		closeWindow() {},
		// 切换导航选项卡
		toggleNav(id) {
			this.navList.forEach((item) => {
				if (item.id == 2) {
					item.path = this.$store.state.path;
				}
				if (item.id == id) {
					item.isActive = true;
					item.blueColor = true;
					item.blackColor = false;
					item.style = {
						"--i": item.id - 1,
						"--j": item.index * 100,
					};
				} else {
					item.isActive = false;
					item.blackColor = true;
					item.blueColor = false;
					item.style = {
						"--i": item.id - 1,
						"--j": item.index,
					};
				}
			});
		},
		// 点击搜索跳转到搜索页面
		targetSearchDetails() {
			this.$router.push(`/searchDetails/${this.search}`);
		},
		// 按回车键也能跳转到搜索列表
		searchMusic() {
			this.targetSearchDetails();
		},

		// 注册账号
		registerUserInfo() {
			if (
				this.username.trim() &&
				this.password.trim() &&
				this.cpassword.trim() &&
				this.password.trim() == this.cpassword.trim()
			) {
				this.registerShow = "";
				this.axios
					.post(
						"/api-userInfo/register",
						`account=${this.username}&password=${this.password}`
					)
					.then((res) => {
						this.username = "";
						this.password = "";
						this.cpassword = "";
						if (res.data.code == 201) {
							this.$message.error("抱歉，该用户名已被注册");
						} else {
							this.$message({
								message: "恭喜你，注册成功",
								type: "success",
							});
							this.toggleLogin(2);
						}
					});
			} else if (this.password !== this.cpassword) {
				this.$message.error("两次输入的密码不一致");
			} else {
				this.$message.error("用户名或密码不能为空");
			}
		},
		// 用户登录
		loginUserInfo() {
			if (this.uname.trim() && this.upwd.trim()) {
				this.loginShow = "";
				this.axios
					.post(
						"/api-userInfo/login",
						`account=${this.uname}&password=${this.upwd}`
					)
					.then((res) => {
						if (res.data.code == 404) {
							this.$message.error(
								"登录失败，用户名或密码输入错误"
							);
						} else {
							sessionStorage.setItem(
								"account",
								res.data.result[0].account
							);

							sessionStorage.setItem(
								"avatar",
								res.data.result[0].avatar
							);
							this.handleLogin();
							this.freshen();
						}
					});
			} else {
				this.$message.error("用户名或密码不能为空");
			}
		},
	},
	mounted() {
		// 页面刷新之后 监视路由地址的组件名称,根据不同的组件名称选中对应的导航栏选项卡
		const path = this.$route.path;
		if (path == "/" || path == "/recommend") {
			this.navList[1].isActive = true;
			this.navList[0].isActive = false;
			this.navList[2].isActive = false;
		} else if (path == "/grope") {
			this.navList[2].isActive = true;
			this.navList[0].isActive = false;
			this.navList[1].isActive = false;
			this.navList[2].blueColor = true;
			this.navList[2].blackColor = false;
			this.navList[1].blackColor = true;
			this.navList[1].blueColor = false;
			this.navList[0].blueColor = false;
			this.navList[0].blackColor = true;
		} else {
			this.navList[0].isActive = true;
			this.navList[1].isActive = false;
			this.navList[2].isActive = false;
		}
	},
	watch: {
		// 监视路由地址的组件名称,根据不同的组件名称选中对应的导航栏选项卡
		$route() {
			const path = this.$route.path;
			if (
				path == "/myMusic" ||
				path == "/collection" ||
				path == "/myRadioStation" ||
				path == "/download" ||
				path == "/cloudDisk" ||
				path == "/recently" ||
				path == "/default"
			) {
				this.navList[0].isActive = true;
				this.navList[1].isActive = false;
				this.navList[2].isActive = false;
				this.navList[0].blueColor = true;
				this.navList[0].blackColor = false;
				this.navList[2].blackColor = true;
				this.navList[1].blueColor = false;
				this.navList[2].blueColor = false;
				this.navList[1].blackColor = true;
				this.navList[1].style = {
					"--i": 1,
					"--j": 2,
				};
				this.navList[2].style = {
					"--i": 2,
					"--j": 1,
				};
				this.navList[0].style = {
					"--i": this.navList[0].id - 1,
					"--j": this.navList[0].index,
				};
			} else if (path == "/grope") {
				this.navList[2].isActive = true;
				this.navList[0].isActive = false;
				this.navList[1].isActive = false;
				this.navList[2].blueColor = true;
				this.navList[2].blackColor = false;
				this.navList[1].blackColor = true;
				this.navList[1].blueColor = false;
				this.navList[0].blueColor = false;
				this.navList[0].blackColor = true;
				this.navList[2].style = {
					"--i": 1,
					"--j": 2,
				};
				this.navList[2].style = {
					"--i": this.navList[2].id - 1,
					"--j": this.navList[2].index,
				};
				this.navList[0].style = {
					"--i": 0,
					"--j": 3,
				};
			} else {
				this.navList[1].isActive = true;
				this.navList[0].isActive = false;
				this.navList[2].isActive = false;
				this.navList[1].blueColor = true;
				this.navList[0].blueColor = false;
				this.navList[2].blueColor = false;
				this.navList[1].blackColor = false;
				this.navList[0].blackColor = true;
				this.navList[0].blackColor = true;
				this.navList[0].style = {
					"--i": 0,
					"--j": 3,
				};
				this.navList[2].style = {
					"--i": 2,
					"--j": 1,
				};
				this.navList[1].style = {
					"--i": this.navList[1].id - 1,
					"--j": this.navList[1].index,
				};
			}
		},
	},
};
</script>
<style lang="scss">
@import "../assets/font/font.css";
@import "../assets/scss/base.scss";
.header {
	position: fixed;
	width: 100%;
	height: 80px;
	background-color: $backgroundColor;
	z-index: 999;
	i {
		font-family: "iconfont";
		color: rgba(255, 255, 255, 0.8);
		cursor: pointer;
		&:hover {
			color: #fff;
		}
	}
	.el-row {
		height: 50px;
		// logo+登录+搜索 start
		.login {
			display: flex;
			align-items: center;
			height: 100%;
			padding-left: 20px;
			> a {
				i {
					font-size: 30px;
					color: #fff;
				}
			}
			> img {
				width: 30px;
				border-radius: 50%;
			}

			// 登录 start
			.login-content {
				font-size: 12px;
				margin-left: 15px;
				a {
					text-decoration: none;
					color: #fff;
				}
				// 登录模态框 start
				.login-box {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100vh;
					background-color: rgba(0, 0, 0, 0.2);
					z-index: 999;
					.model-box {
						position: absolute;
						top: calc(50% - 200px);
						left: calc(50% - 200px);
						width: 400px;
						height: 360px;
						background-color: #fff;
						.box-hd {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 35px;
							background-color: $backgroundColor;
							p {
								color: #fff;
								font-size: 14px;
								padding-left: 15px;
							}
							a {
								font-size: 15px;
								padding-right: 20px;
							}
						}
						.box-bd {
							padding: 40px 65px;
							// 登录的选项卡 start
							.tab {
								width: 100%;
								height: 30px;
								ul {
									list-style: none;
									display: flex;
									width: 100%;
									height: 100%;
									border-bottom: 1px solid rgb(233, 230, 230);
									box-sizing: border-box;
									li {
										width: 100%;
										text-align: center;
										transform: translateY(1px);
										a {
											font-size: 16px;
											font-weight: 700;
											color: #666;
											transition: all 0.2s;
											&:hover {
												color: #288fe7;
											}
										}
									}
									.is_active {
										border-bottom: 2px solid #37aefe;
										a {
											color: #288fe7;
										}
									}
								}
							}
							// 登录的选项卡 end

							// 表单内容 start
							.content {
								padding-top: 20px;
								width: 100%;
								.form {
									width: 100%;
									input {
										outline: 0;
										width: 100%;
										height: 35px;
										margin-bottom: 10px;
										font-size: 16px;
										padding: 3px 15px;
										border: 1px solid #ccc;
										box-sizing: border-box;
										&::placeholder {
											color: #ccc;
											font-size: 16px;
											font-weight: normal;
										}
										&:focus {
											border-color: #999;
										}
									}
									.login-help {
										display: flex;
										justify-content: space-between;
										height: 25px;
										margin-top: 5px;
										.auto-login {
											display: flex;
											align-items: center;
											input {
												width: 14px;
												margin-right: 7px;
											}
											label {
												color: #666;
												cursor: pointer;
												transform: translateY(-5px);
											}
										}
										.get-back-account {
											a {
												color: #666;
												&:hover {
													text-decoration: underline;
												}
											}
										}
									}
									button {
										border: 0;
										outline: 0;
										width: 100%;
										height: 35px;
										margin-top: 20px;
										font-size: 16px;
										border-radius: 3px;
										color: #fff;
										background-color: #169af3;
										&:hover {
											background-color: #0c8ee6;
										}
										cursor: pointer;
									}
								}
							}
							// 表单内容 end
						}
					}
				}
				// 登录模态框 end
			}
			// 登录 end

			// 刷新+搜索 start
			.search {
				display: flex;
				align-items: center;
				height: 100%;
				margin-left: 120px;
				// 后退 start
				.back {
					i {
						font-size: 18px;
					}
				}
				// 后退 end

				// 刷新 start
				.freshen {
					margin: 0 20px 0 15px;
					i {
						font-size: 14px;
					}
				}
				// 刷新 end

				// 搜索 start
				.input {
					position: relative;
					width: 232px;
					height: 26px;
					// 搜索框 start
					input {
						outline: 0;
						border: 0;
						width: 100%;
						height: 100%;
						padding-left: 10px;
						font-size: 12px;
						border-radius: 26px;
						color: rgba(255, 255, 255, 0.7);
						background-color: #74a7fe;
						box-sizing: border-box;
						&:focus {
							color: #fff;
						}
					}
					// 搜索框 end

					// 两个图标 start
					i {
						position: absolute;
					}
					// 两个图标 end

					// 搜索图标 start
					#search {
						top: 5px;
						right: 10px;
					}
					// 搜索图标 end

					// 关闭图标 start
					#close {
						font-size: 15px;
						top: 6px;
						right: 30px;
					}
					// 关闭图标 end
				}
				// 搜索 end

				// 听歌识曲 start
				.listen {
					i {
						font-size: 15px;
						margin-left: 15px;
					}
				}
				// 听歌识曲 end
			}
			// 刷新+搜索 end
		}
		// logo+登录+搜索 end

		// 其它一大堆图标 start
		.other-icon {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100%;
			padding: 0 10px;
			i {
				margin: 0 6px;
			}
			// 消息中心 start
			.message {
				font-size: 18px;
			}
			// 消息中心 end

			// 主菜单 start
			.menu {
				i {
					font-size: 15px;
				}
			}
			// 主菜单 end

			// 垂直分割线 start
			.vertical-line {
				width: 1px;
				height: 14px;
				margin: 0 10px;
				background-color: rgba(255, 255, 255, 0.3);
			}
			// 垂直分割线 end

			// 精简模式 start
			.condense {
				i {
					display: block;
					font-size: 18px;
					transform: rotateY(180deg) translateY(2px);
				}
			}
			// 精简模式 end

			// 最大化 start
			.max {
				i {
					font-size: 14px;
				}
				i:last-child {
					font-size: 12px;
				}
			}
			// 最大化 end
		}
		// 其它一大堆图标 end
	}

	// 选项卡 start
	.tab-bar {
		position: relative;
		height: 30px;
		// 导航列表 start
		.nav-list {
			display: flex;
			height: 100%;
			// 列表项 start
			li {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				left: calc(var(--i) * 155px);
				width: 200px;
				height: 100%;
				z-index: calc(var(--j) * 1);
				cursor: pointer;
				background: url(../assets/img/navBg1.png) no-repeat;
				&.is-active {
					background-image: url(../assets/img/navBg2.png);
					z-index: 100;
					&:hover {
						background-image: url(../assets/img/navBg2.png);
					}
				}
				&:hover {
					background-image: url(../assets/img/navBg1-hover.png);
					.close {
						display: block;
					}
				}
				a {
					width: 100%;
					height: 100%;
					line-height: 30px;
					text-align: center;
					font-size: 13px;
					color: #333;
					i {
						display: inline-block;
						color: #616771;
						&.my-music {
							font-size: 14px;
							margin-right: 5px;
						}
						&.discovery {
							font-size: 20px;
							margin-right: 2px;
						}
					}
					span {
						display: inline-block;
						&.discovery {
							transform: translateY(-2px);
						}
					}
					&.blue-color {
						color: #5192fe;
						font-weight: 700;
						i {
							font-weight: normal;
							color: #5192fe;
						}
					}
				}
				// 关闭按钮 start
				.close {
					display: none;
					position: absolute;
					right: 30px;
					width: 16px;
					height: 16px;
					font-size: 16px;
					border-radius: 50%;
					i {
						display: inline-block;
						color: #666;
						transform: translateY(1px);
					}
					&:hover {
						background-color: rgba(0, 0, 0, 0.1);
						i {
							color: #333;
						}
					}
				}
				// 关闭按钮 end
			}
			// 列表项 end
			// 添加按钮 start
			.add {
				top: 5px;
				left: 497px;
				width: 37px;
				height: 19px;
				background: url(../assets/img/add.png);
				&:hover {
					background-image: url(../assets/img/add-hover.png);
				}
			}
			// 添加按钮 end
		}
		// 导航列表 end
	}
	// 选项卡 end
}
</style>
